<template>
  <div class="c-selectCity">
    <Select v-model="province" style="width:100px" @on-change="getCity">
      <Option v-for="item in provinceList" :value="item.id" :key="item.value">{{ item.name }}</Option>
    </Select>
    <Select v-model="city" style="width:100px" v-if="city!== false" @on-change="getArea">
      <Option v-for="item in cityList" :value="item.id" :key="item.value">{{ item.name }}</Option>
    </Select>
    <Select v-model="area" style="width:100px" v-if="area!== false">
      <Option v-for="item in areaList" :value="item.id" :key="item.value">{{ item.name }}</Option>
    </Select>
  </div>
</template>
<script>
    import $ from "jquery";
    export default {
        props: {
          provinceAjax:{
            type:String,
            default:"http://www.moupro.cn/api/District/getProvince"
          },
          cityAjax:{
            type:String,
            default:"http://www.moupro.cn/api/District/getCity"
          },
          areaAjax:{
            type:String,
            default:"http://www.moupro.cn/api/District/getArea"
          }
        },
        data() {
            return {
              cityList: [],
              provinceList:[],
              areaList:[],
              city: '',
              province: '',
              area: '',
            }
        },
        methods: {
          async getProvince(){
            this.provinceList =  await $.get(this.provinceAjax);
          },
          async getCity(){
            this.cityList = await $.get(this.cityAjax,{city:this.province});
            this._rest("city")._rest("area");
          },
          async getArea(){
            this.areaList = await $.get(this.areaAjax,{area:this.city});
            this._rest("area");
          },
          _rest(name){
            this[name] = false;
            setTimeout(()=>{this[name]= ""},0);
            return this
          },
          getData(){
              return{
                city:this.city,
                province:this.province,
                area:this.area
              }
          }
        },
        components: {},
        mounted() {

        },
        created() {
           this.getProvince();
        }
    }
</script>

<style lang="less">
  .c-selectCity{

    .ivu-select-dropdown{
      z-index: 100086;
    }
  }
</style>
